<template>
  <view class="container"  :style="{ paddingTop: headerHeight + 'px' }">
    <CustomHeader @height-change="onHeaderHeightChange" />
    
    <!-- 服务特色区域 -->
    <view class="service-features">
      <view class="feature-item">
        <image class="feature-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/gift.png" mode="heightFix"></image>
        <text class="feature-text">礼盒包装</text>
      </view>
      <image class="link-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/link.png" mode="widthFix"></image>
      <view class="feature-item">
        <image class="feature-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/kd.png" mode="heightFix"></image>
        <text class="feature-text">免费配送</text>
      </view>
      <image class="link-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/link.png" mode="widthFix"></image>
      <view class="feature-item">
        <image class="feature-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/zs.png" mode="heightFix"></image>
        <text class="feature-text">正品保障</text>
      </view>
    </view>



    <!-- 购物车标题 -->
    <view class="cart-header" v-if="cartItems.length">
      <text class="cart-title">购物车</text>
      <text class="cart-count">共 {{ totalItems }} 件商品</text>
    </view>

    <!-- 购物车商品列表 -->
    <view class="cart-list" v-if="cartItems.length">
      <view v-for="(item, index) in cartItems" :key="index" class="cart-item">
        <checkbox-group @change="checkboxChange($event, index)">
          <checkbox iconColor="#000" borderColor="#000" color="#000" :value="index.toString()" :checked="item.checked" class="item-checkbox" />
        </checkbox-group>
        
        <view class="item-image">
          <image :src="item.listImg" mode="aspectFit"></image>
        </view>
        
        <view class="item-content">
          <view class="item-info">
            <text class="item-name">{{ item.goodsName }}</text>
            <text class="item-price">{{ item.goodsPrice }}</text>
          </view>
          
          <view class="item-controls">
            <view class="quantity-control">
              <view class="quantity-btn" @click="decreaseQuantity(index)">-</view>
              <view class="quantity-input">{{ item.quantity }}</view>
              <view class="quantity-btn" @click="increaseQuantity(index)">+</view>
            </view>
          </view>
        </view>
        
        <view class="item-delete" @click="removeItem(index)">
          <image class="delete-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/close.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 购物车为空状态 -->
    <view class="empty-cart" v-if="!cartItems.length">
      <view class="empty-icon">
        <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/cart.svg" mode="widthFix"></image>
      </view>
      <text class="empty-text">您的购物车为空</text>
      <view class="continue-shopping-btn" @click="continueShopping">
        <text class="continue-shopping-text">继续购物</text>
      </view>
    </view>

    <!-- 底部结算区域 -->
    <view class="cart-bottom" v-if="cartItems.length">
      <view class="select-all">
        <checkbox-group @change="selectAllChange">
          <checkbox iconColor="#000" borderColor="#000"  color="#000" value="selectAll" :checked="isAllSelected" class="select-all-checkbox" />
        </checkbox-group>
        <text class="select-all-text">全选</text>
        <text class="selected-count">共 {{ selectedItems }} 件</text>
      </view>
      
      <view class="total-section">
        <text class="total-label">合计:</text>
        <text class="total-price">{{ totalPrice }}</text>
      </view>
      
      <view class="checkout-btn" @click="checkout">
        <text class="checkout-text">立即下单</text>
      </view>
    </view>

    <CustomTabBar :activeIndex="3" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import CustomHeader from '@/components/CustomHeader.vue'
import cartManager from '@/utils/cart.js'

export default {
  components: { CustomTabBar, CustomHeader },
  data() {
    return {
				headerHeight: 0,
        cartItems: []
    }
  },
  computed: {
    totalItems() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0)
    },
    selectedItems() {
      return this.cartItems.filter(item => item.checked).reduce((total, item) => total + item.quantity, 0)
    },
    totalPrice() {
      return this.cartItems.filter(item => item.checked).reduce((total, item) => total + item.goodsPrice * item.quantity, 0)
    },
    isAllSelected() {
      return this.cartItems.length > 0 && this.cartItems.every(item => item.checked)
    }
  },
  onLoad() {
    this.cartItems = cartManager.loadLocalCart()?.items
    console.log(this.cartItems)
  },
  methods: {
			onHeaderHeightChange(height) {
				this.headerHeight = height;
			},
    checkboxChange(e, index) {
      this.cartItems[index].checked = e.detail.value.length > 0
    },
    selectAllChange(e) {
      const isChecked = e.detail.value.length > 0
      this.cartItems.forEach(item => {
        item.checked = isChecked
      })
    },
    increaseQuantity(index) {
      this.cartItems[index].quantity++
      cartManager.updateQuantity(this.cartItems[index])
    },
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--
        cartManager.updateQuantity(this.cartItems[index])
      }
    },
    removeItem(index) {
      this.cartItems.splice(index, 1)
      cartManager.removeItem(this.cartItems[index].id)
    },
    checkout() {
      const selectedItems = this.cartItems.filter(item => item.checked)
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择要结算的商品',
          icon: 'none'
        })
        return
      }

      const products = selectedItems.map(item => ({
        name: item.goodsName,
        price: item.goodsPrice,
        listImg: item.listImg,
        quantity: item.quantity,
        id: item.id
      }))
      const productsStr = encodeURIComponent(JSON.stringify(products))
      
      // 跳转到订单页面
      uni.navigateTo({
        url: '/pages/order/index?productsStr=' + productsStr
      })
    },
    continueShopping() {
      // 跳转到商城页面
      uni.switchTab({
        url: '/pages/mall/index'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding-bottom: 280rpx; // 为tabbar留出空间
  background-color: #fff;
}

// 服务特色区域
.service-features {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3F2B56;
  margin-bottom: 20rpx;
  padding: 0 100rpx;
  height: 142rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.feature-icon {
  height: 26rpx;
  margin-bottom: 20rpx;
}

.feature-text {
  color: white;
  font-size: 20rpx;
  font-weight: 400;
}

.link-icon {
  width: 20rpx;
  margin: 0 30rpx;
}

// 购物车标题
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  padding-left: 54rpx;
  background: white;
  margin-bottom: 20rpx;
}

.cart-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #000;
}

.cart-count {
  font-size: 28rpx;
  color: #333;
}

// 购物车商品列表
.cart-list {
  background: white;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  width: 618rpx;
  margin: 0 auto;
  background-color: #FAFAFA;
  margin-bottom: 21rpx;
  position: relative;
}

.item-checkbox {
  margin-right: 24rpx;
  transform: scale(.6);
  border-color: #000;
}

.item-image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 24rpx;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
  }
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160rpx;
  margin-top: 44rpx;
}

.item-info {
  .item-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
    display: block;
    margin-bottom: 16rpx;
  }
  
  .item-price {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;

    &::before {
      content: '¥';
      font-size: 20rpx;
    }
  }
}

.item-controls {
  display: flex;
  justify-content: flex-end;
}

.quantity-control {
  display: flex;
  align-items: center;
  border-radius: 0;
  overflow: hidden;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #666;
}

.quantity-input {
  width: 68rpx;
  height: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #666;
}

.item-delete {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

.delete-icon {
  width: 20rpx;
  height: 20rpx;
}

// 购物车为空状态
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 250rpx;
  background: white;
  margin-top: 20rpx;
  margin-bottom: 20rpx;

  .empty-icon {
    margin-bottom: 20rpx;
     
     image {
     width: 54rpx;
     }
  }

  .empty-text {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 106rpx;
  }

  .continue-shopping-btn {
    background: #000;
    width: 192rpx;
    height: 76rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;

    .continue-shopping-text {
      color: white;
      font-size: 28rpx;
      font-weight: 500;
    }
  }
}

// 底部结算区域
.cart-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 170rpx; // tabbar高度
  height: 120rpx;
  background: #F7F7F7;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.select-all {
  display: flex;
  align-items: center;
  flex: 1;
}

.select-all-checkbox {
  margin-right: 16rpx;
  transform: scale(.8);
}

.select-all-text {
  font-size: 28rpx;
  color: #333;
  margin-right: 24rpx;
}

.selected-count {
  font-size: 24rpx;
  color: #666;
}

.total-section {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}

.total-label {
  font-size: 22rpx;
  color: #000;
  margin-right: 8rpx;
}

.total-price {
  font-size: 34rpx;
  color: #000;
  font-weight: 600;

  &::before {
    content: "￥";
    font-size: 24rpx;
  }
}

.checkout-btn {
  background: #000;
  width: 192rpx;
  height: 76rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.checkout-text {
  color: white;
  font-size: 28rpx;
  font-weight: 500;
}
</style> 